
<template>
  <div class="send">
    <el-dialog
      title="新建事项"
      :visible.sync="visible"
      :showaddDialog="showaddDialog"
      @close="close"
      class="sendhead"
    >
    <!-- @close="$emit('update:showaddDialog', false)" -->
      <div class="form">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="项目名称:">
            <el-input style="width: 400px" v-model="ruleForm.projectName"></el-input>
          </el-form-item>
          <el-form-item label="事项名称:">
            <el-input
              style="width: 400px"
              v-model="ruleForm.itemName"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请单位:">
            <el-input
              style="width: 400px"
              v-model="ruleForm.applyCompany"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请人:">
            <el-input style="width: 400px" v-model="ruleForm.applyPerson"></el-input>
          </el-form-item>
          <el-form-item label="申请时间:">
                <el-date-picker
                style="width:400px"
                v-model="ruleForm.applyTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
          
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm()">保存</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addtaskList } from "@/api/zhbl/zhbl.js";
export default {
  props: {
    showaddDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: this.showaddDialog,
      name: "",
      ruleForm: {
        projectName: "",
        itemName: "",
        applyCompany: "",
        applyPerson: "",
        applyTime: "",
      },
    };
  },
  watch: {
    showaddDialog() {
      this.visible = this.showaddDialog;
    },
  },
  methods: {
    close() {
      this.$emit('update:showaddDialog', false)
    },
   async submitForm() {
      const res =await addtaskList(JSON.stringify(this.ruleForm));
      this.$message({
        message:'新建成功!',
        type: 'success'
      })
      this.$emit('update')
      this.close() //关闭弹框
      console.log(res);
    },
    resetForm() {
    this.ruleForm.projectName='',
    this.ruleForm.itemName='',
    this.ruleForm.applyCompany='',
    this.ruleForm.applyPerson='',
    this.ruleForm.applyTime=''
    },
    
  },
};
</script>

<style lang="scss" scoped>
.send {
  /deep/ .sendhead .el-dialog .el-dialog__header {
    height: 42px;
    background: #f4f6f8 !important;
  }
  /deep/.el-dialog__title {
    font-size: 14px;
    color: black;
    font-weight: bold;
  }
  // 弹框内容的样式
  .form {
    width: 70%;
    margin: 0 auto;
  }
}
</style>